import React from 'react'
import { Table, Button, ConfigProvider, Popconfirm } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';

import style from '../othercompon.module.css';
import zhCN from 'antd/lib/locale/zh_CN';

export default function tableLogin() {
  const data = [
    {
      key: '1',
      name: '超级管理员',
      age: '2022/3/30 18:57:03',
      address: '172.16.106.71',


    },
    {
      key: '2',
      name: '超级管理员',
      age: '2022/3/30 18:57:03',
      address: '172.16.106.71',


    },
    {
      key: '3',
      name: '超级管理员',
      age: '2022/3/30 18:57:03',
      address: '172.16.106.71',


    },
    {
      key: '4',
      name: '超级管理员',
      age: '2022/3/30 18:57:03',
      address: '172.16.106.71',
    },
    {
      key: '5',
      name: '超级管理员',
      age: '2022/3/30 18:57:03',
      address: '172.16.106.71',
    },
    {
      key: '6',
      name: '超级管理员',
      age: '2022/3/30 18:57:03',
      address: '172.16.106.71',
    }, {
      key: '7',
      name: '超级管理员',
      age: '2022/3/30 18:57:03',
      address: '172.16.106.71',
    }, {
      key: '8',
      name: '超级管理员',
      age: '2022/3/30 18:57:03',
      address: '172.16.106.71',
    }, {
      key: '9',
      name: '超级管理员',
      age: '2022/3/30 18:57:03',
      address: '172.16.106.71',
    }, {
      key: '10',
      name: '超级管理员',
      age: '2022/3/30 18:57:03',
      address: '172.16.106.71',
    }, {
      key: '11',
      name: '超级管理员',
      age: '2022/3/30 18:57:03',
      address: '172.16.106.71',
    }
  ];
  const columns = [
    { title: '账户', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '时间', dataIndex: 'age', key: 'age', align: 'center' },
    { title: '登录IP', dataIndex: 'address', key: 'address', align: 'center' },
    {
      title: '操作',
      dataIndex: '',
      align: 'center',
      key: 'x',
      render: (txt) => {
        return (
          <ConfigProvider locale={zhCN}>
            <Popconfirm
              title="确定要删除？"
              icon={<InfoCircleOutlined />}
              onConfirm={(e) => {
                console.log('点击了确认')
              }}
              onCancel={(e) => {
                console.log('点击了取消')
                // 此处调用api接口
              }}
            >
              <span style={{ color: 'red', fontSize: '13px' }}>删除</span>
            </Popconfirm>
          </ConfigProvider>
        )
      },
    }
  ]
  return (
    <div className={style.tableItem}>
      <ConfigProvider locale={zhCN}>
        <Table dataSource={data} columns={columns}
          pagination={{
            showSizeChanger: true,
            showQuickJumper: true,
            total: data.length,
            defaultPageSize: 5,
            defaultCurrent: 1,
            pageSizeOptions: ['5', '10', '15'],
            showTitle: (count = data.length) => {
              return '共' + data.length + '条'
            },
          }}
        />
      </ConfigProvider>
      <div className={style.pagingBox}>
        <Button type='primary'>清除数据</Button>
      </div>
    </div >
  )
}
